<template>
	<div id="J_channels" class="jd_container" aria-label="频道广场" tabindex="0">
		<div class="channelsB">
			<div class="floorhd">
				<div class="grid_c1 floorhd_inner">
					<h3 class="floorhd_tit" v-hover="{over:'red',out:'black'}">频道广场</h3>
				</div>
			</div>
			<div class="channels_block channels_block_1">
				<div class="channels_block_wrapper">
					<template v-for="(item, index) in channels" key="item.name">
						<div
							v-if="index < 2"
							:class="`channels_item channels_item_${index + 1}`"
						>
							<a
								class="channels_item_link"
								:href="item.bigLink"
								target="_blank"
								clstag="h|keycount|chan|fixed#01_null"
								:aria-label="item.name"
								><div class="lazyimg lazyimg_loaded channels_item_img">
									<img :src="item.bigImg" class="lazyimg_img" /></div
							></a>
						</div>

						<div v-else :class="`channels_item channels_item_${index + 1}`">
							<a
								class="channels_item_title"
								:href="item.ext_columns.url"
								target="_blank"
								clstag="h|keycount|chan|bi#01_a"
								><span class="channels_item_title_main">{{ item.name }}</span
								><span class="channels_item_title_aside">{{
									item.desc
								}}</span></a
							>
							<div class="channels_item_imgs">
								<a
									class="channels_item_link"
									:href="item.ext_columns.url"
									target="_blank"
									clstag="h|keycount|chan|bi#01_b01"
									tabindex="-1"
								>
									<div class="lazyimg lazyimg_loaded channels_item_img">
										<img
											:src="`//img14.360buyimg.com/img/s100x100_${item.item[0].img}`"
											class="lazyimg_img"
										/>
									</div>
								</a>
								<a
									class="channels_item_link"
									:href="item.ext_columns.url"
									target="_blank"
									clstag="h|keycount|chan|bi#01_b02"
									tabindex="-1"
								>
									<div class="lazyimg lazyimg_loaded channels_item_img">
										<img
											:src="`//img14.360buyimg.com/img/s100x100_${item.item[1].img}`"
											class="lazyimg_img"
										/></div
								></a>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import "./css/channels.chunk.css";
	import { mapActions,mapState } from 'vuex'

	export default {
		data() {
			return {
				// channels: [],
			};
		},
		computed:{
			...mapState(["channels"])
		},
		async mounted() {
			if (!this.channels?.length) {
				console.log("mounted getChannels...");
				this.getChannels()
			}else{
				console.log("mounted 使用缓存的Channels...");
			}
		},
		methods:{
			...mapActions(["getChannels"])
		}
	};
</script>

<style lang="scss" scoped>

</style>